<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <Button
            type="primary"
            @click="showCreate"
            v-if="allPermissions.verAddBtn"
          >{{ $t("versionIndex.verAddBtn") }}</Button>
        </div>
        <div class="title">{{ $t("versionIndex.verTitle") }}</div>
      </div>

      <!-- <div class="glo-selection">
        <Alert show-icon>
          已选择 {{ selection.length }} 项
          <a class="glo-selection-clean" @click="handleSelectionAllStatus(false)">清空</a>
        </Alert>
      </div> -->
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </div>

    <VersionEdit
      v-if="ifCreate"
      @close="closeCreate"
    />
    <VersionEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
  </div>
</template>

<script>
import {
  getList,
  del,
  delOta,
} from '@/api/version.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

import VersionEdit from './components/VersionEdit'
import ListSettings from './components/ListSettings'

export default {
  mixins: [
    pageMixin,
  ],
  components: {
    VersionEdit,
  },
  computed: {
    btnShow () {
      return this.$store.state.btnShow
    },
  },
   watch: {
    btnShow(){
      this.columns = [{
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('devicesIndex.upgradeType'),
          key: 'deviceType',
        },
        {
          title: this.$t('versionIndex.verListName'),
          key: 'apkname',
        },
        {
          title: this.$t('versionIndex.verListVersion'),
          key: 'version',
        },
        {
          title: this.$t('versionIndex.verCreateTime'),
          key: 'createTime',
        },
        {
          title: this.$t('versionIndex.verfilename'),
          key: 'downloadUrl',
        },
        {
          title: this.$t('versionIndex.verOperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ];
      return this.$store.state.btnShow
    }
  },

  data () {
    return {
      selection: [],
      list: [],
      columns: [
        // { type: 'selection' },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('devicesIndex.upgradeType'),
          key: 'deviceType',
        },
        {
          title: this.$t('versionIndex.verListName'),
          key: 'apkname',
        },
        {
          title: this.$t('versionIndex.verListVersion'),
          key: 'version',
        },
        {
          title: this.$t('versionIndex.verCreateTime'),
          key: 'createTime',
        },
        {
          title: this.$t('versionIndex.verfilename'),
          key: 'downloadUrl',
        },
        {
          title: this.$t('versionIndex.verOperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],

      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      allPermissions:{
        verAddBtn:false,
        verListSettingsEdit:false,
        verListSettingsDel:false,
      },
    }
  },

  mounted () {
    this.$_page_update();
    this.getAllPermissions()
  },

  methods: {
    getAllPermissions(){
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#version'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#verAddBtn1'&&a.checked==='true'){
              this.allPermissions.verAddBtn=true
            }
            if(a.permission=='#verListSettingsEdit6'&&a.checked==='true'){
              this.allPermissions.verListSettingsEdit=true
            }
            if(a.permission=='#verListSettingsDel6'&&a.checked==='true'){
              this.allPermissions.verListSettingsDel=true
            }
          })
        }
      });
    },
    showCreate () {
      this.ifCreate = true
    },
    closeCreate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifCreate = false
    },

    showUpdate (item) {
      this.ifUpdate = true
      this.editItem = item
    },
    closeUpdate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifUpdate = false
    },

    handleSelection (selection = []) {
      this.selection = selection
    },
    handleSelectionAllStatus (status) {
      this.$refs.table.selectAll(status)
    },

    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
      }
    },

    async getData (query) {
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        page = data.pageNum || 1
        total = data.count
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
    },
    async handleDel (item) {
      this.$Modal.confirm({
        title: this.$t('versionIndex.verDelArea'),
        // content: this.$t('versionIndex.verDelAreaIs') + item.areaName + this.$t('versionIndex.verDelAreaIsN'),
        content: this.$t('versionIndex.verDelAreaIsNew'),
        onOk: async () => {
          const { success } = await delOta({ id: item.id })
          if (success) {
            this.$Message.success(this.$t('versionIndex.verDelBtnSucc') )
            this.$_page_update()
          } else {
            this.$Message.error(this.$t('versionIndex.verDelBtnF'))
          }
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
